<!--设置模块唯一ID-->
<div id="aq_ds_taocanguanli">
    <!--标题、面包屑-->
    <section class="content-header">
        <h1>
            套餐管理
            <small>电商</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li>奥桥</li>
            <li>电商</li>
            <li class="active">套餐管理</li>
        </ol>
    </section>
    <!--列表-->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <div class="btn-group pull-left" data-type="actionBar">
                            <button type="button" class="btn btn-default" data-action="download"><i class="fa fa-download"></i> 同步数据</button>
                            <button type="button" class="btn btn-default" data-action="add"><i class="fa fa-add"></i> 新增套餐</button>
                            <button type="button" class="btn btn-default" data-action="modify"><i class="fa fa-pencil"></i> 修改套餐</button>
                        </div>
                        <div class=" pull-right" data-type="columnControl">
                        </div>
                        <div class=" pull-right " data-type="searchControl">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="box-body">
                        <table class="table table-bordered table-striped table-hover" style="width: 2000px">
                            <thead>
                                <tr>
                                    <th rowspan="2"></th>
                                    <th rowspan="2">操作</th>
                                    <th rowspan="2">编号</th>
                                    <th rowspan="2">套餐编号</th>
                                    <th rowspan="2">套餐名称</th>
                                    <th colspan="4">套餐内容</th>
                                    <th rowspan="2">套餐金额</th>
                                    <th rowspan="2">商品售价</th>
                                    <th rowspan="2">优惠金额</th>
                                    <th rowspan="2">备注</th>
                                </tr>
                                <tr>
                                    <th>商品编号</th>
                                    <th>商品名称</th>
                                    <th>商品数量</th>
                                    <th>商品单位</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script>
        USEN(function () {
            //模块ID(全系统唯一)
            var id = "#aq_ds_taocanguanli";
            var add = "aq_ds_taocanguanli_add";
            var modify = "aq_ds_taocanguanli_modify";

            //定义页面变量
            var $el = $(id);
            var $actionBar = $el.find("[data-type=actionBar]");
            var tableId = id + " table.table";
            var $table = $(tableId);
            var myTable;


            //定义增\删\改 方法
            var editor = {
                download: function (data) {
                    //
                },
                add: function () {
                    USEN.load(USEN.router[add]);
                },
                modify: function (data) {
                    USEN.load(USEN.router[modify],data);
                }
            };

            // 绑定列表编辑按钮事件
            $actionBar.find("[data-action]").on("click", function () {
                var action = $(this).data("action");
                var $selected = $table.find('tr.selected');
                switch (action) {
                    case "download" :
                        editor.download();
                        break;
                    case "add" :
                        editor.add();
                        break;
                    case "modify" :
                        if ($selected.length > 0) {
                            editor.modify(myTable.row($selected).data());
                        } else {
                            //提示"请选中要修改的行"
                            USEN.modal({
                                title: "提示",
                                content: "请选中要修改的行.",
                                cancelBtn: true,
                                cancelTxt: "关闭"
                            })
                        }
                        break;
                }
            });

            //初始化datatable数据列表
            myTable = new USEN.Datatable({
                //设置ID
                "id": tableId,
                //设置列控制模块容器
                "columnControl": id + " [data-type=columnControl]",
                //设置搜索模块容器
                "searchControl": id + " [data-type=searchControl]",
                //每行"操作"自定义action按钮回调
                onItemAction: function ($tr, action) {
                    switch (action) {
                        case "shangjia" :
                            break;
                        case "xiajia" :
                            break;
                    }
                },
                //配置服务
                "ajax": "./simdata/common_table_ation.json",
                //列设置
                "columns": [
                    {
                        data: null,
                        defaultContent: '',
                        className: 'select-checkbox',
                        orderable: false, searchable: false,
                        width: "30px"
                    },
                    { "title": "操作", "data": null, orderable: false, searchable: false, width: '200px', render: function (data, type, full, meta) {
                        return  '<button data-item-action="shangjia" class="btn btn-primary">上架</button>&nbsp;&nbsp;' +
                                '<button data-item-action="xiajia" class="btn btn-danger">下架</button>'
                    }},
                    { "title": "", "data": "p2"},
                    { "title": "", "data": "p3"},
                    { "title": "", "data": "p4" },
                    { "title": "", "data": "p5" },
                    { "title": "", "data": "p6" },
                    { "title": "", "data": "p7" },
                    { "title": "", "data": "p7" },
                    { "title": "", "data": "p7" },
                    { "title": "", "data": "p7" },
                    { "title": "", "data": "p7" },
                    { "title": "", "data": "p7" }
                ]
            })
        });
    </script>
</div>